import 'package:flutter/material.dart';
import 'package:spring_dict/UI/Component/ListDividerGenerator.dart';
import 'package:spring_dict/UI/Component/MessageDialog.dart';
import 'package:spring_dict/UI/Pages/AboutPage.dart';

class UserCenterPage extends StatelessWidget {

  static final MenuAction errorAction = (context) => showMessageDialog(context, title: "كەچۈرۈڭ", content: "نۆۋەتتىكى ئىقتىدار ۋاقتىنچە تەمىنلەنمىگەن، يىڭىلىنىشنى كۈتۈپ تۇرۇڭ");
  final List<SettingsMenu> menuItems = [
    SettingsMenu(
        id: 0,
        label: "ئۇچۇرلىرىم",
        description: "سىزنىڭ ھىسابات نامىڭىز، پارولىڭىز قاتارلىق ئۇچۇرلىرىڭىز",
        icon: Icon(Icons.people,),
        action: errorAction,
        animationTag: "Profile-Page-Logo"
    ),
    SettingsMenu(
        id: 0,
        label: "جۇغلانما نومۇر ۋە ئورۇندالغان ۋەزىپە",
        description: "ۋەزىپە ئورۇنلاپ ئىرىشكەن جۇغلانما نومۇرىڭىز",
        icon: Icon(Icons.people,),
        action: errorAction,
        animationTag: "Integral-Page-Logo"
    ),
    SettingsMenu(
      id: 0,
      label: "ھەققىدە",
      description: "يۇمشاق دېتال تەمىنلىگۈچى ئۇچۇرلىرى",
      icon: Icon(Icons.info),
      action: (context) => Navigator.of(context).push(MaterialPageRoute(builder: (context) => AboutPage())),
      animationTag: "About-Page-Logo"
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(
          expandedHeight: 250.0,
          flexibleSpace: FlexibleSpaceBar(
            background: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                SizedBox(height: 10.0,),
                Text("خۇش كىلىپسىز",
                  style: TextStyle(
                    fontSize: 25.0,
                    color: Colors.white,
                    fontFamily: "ukij-title"
                  ),
                ),
                SizedBox(height: 20.0,),
                CircleAvatar(
                  backgroundColor: Colors.white,
                  backgroundImage: AssetImage("assets/pictures/boy.png"),
                  radius: 64.0,
                ),
                SizedBox(height: 10.0,),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    RaisedButton(
                      onPressed: (){},
                      child: Text("كىرىڭ"),
                      color: Colors.white,
                      splashColor: Colors.green,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.only(
                          bottomRight: Radius.circular(20.0),
                          topRight: Radius.circular(20.0),
                        )
                      ),
                    ),
                    RaisedButton(
                      onPressed: (){},
                      child: Text("تىزىملىتىڭ"),
                      color: Colors.white,
                      splashColor: Colors.green,
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.only(
                              bottomLeft: Radius.circular(20.0),
                              topLeft: Radius.circular(20.0),
                          )
                      ),
                    ),
                  ],
                )
              ],
            )
          ),
        ),
        SliverList(
          delegate: SliverChildListDelegate(ListDividerGenerator(menuItems.map((item) => buildMenuItem(context, item)).toList(), Divider()).items),
        )
      ],
    );
  }

  Widget buildMenuItem(BuildContext context, SettingsMenu menu){
    return ListTile(
      title: Text(menu.label),
      subtitle: Text(menu.description),
      leading: Hero(tag: menu.animationTag, child: menu.icon),
      onTap: () => menu.action(context),
    );
  }
}

typedef MenuAction = void Function(BuildContext context);

class SettingsMenu{
  int id;
  String label;
  String description;
  Icon icon;
  MenuAction action;
  String animationTag;

  SettingsMenu({this.id, this.label, this.description, this.icon, this.action, this.animationTag});
}